<template>
  <el-dialog
      :title="state.ruleForm.id ? $t('common.editBtn') : $t('common.addBtn')"
      v-model="visible"
      width="600"
      :close-on-click-modal="false"
      draggable
  >
    <el-form ref="menuDialogFormRef" :model="state.ruleForm" :rules="dataRules" label-width="90px" v-loading="loading">
      <el-form-item :label="$t('sysmenu.menuType')" prop="type">
        <el-radio-group v-model="state.ruleForm.type">
          <el-radio border label="1">标签</el-radio>
          <el-radio border label="0">文件夹</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级目录" prop="parentId" >
        <el-tree-select
            v-model="state.ruleForm.parentId"
            :data="treeList"
            :render-after-expand="false"
            :props="{ value: 'id', label: 'name', children: 'children' }"
            class="w100"
            check-strictly
            :placeholder="$t('sysmenu.inputParentIdTip')"
        >
        </el-tree-select>
      </el-form-item>
      <el-form-item label="场景名称" prop="folderName">
        <el-input v-model="state.ruleForm.folderName" clearable placeholder="请输入组态场景名称"></el-input>
      </el-form-item>
      
      <el-form-item label="组态" prop="scadaId" v-if="state.ruleForm.type === '1'">
        <el-select v-model="state.ruleForm.scadaId" clearable placeholder="请选择组态文件">
          <el-option v-for="(item, index) in scadaList" :key="index" :label="item.scadaName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="state.ruleForm.sort"  :min="0" controls-position="right" clearable placeholder="请输入排序"></el-input-number>
      </el-form-item>
      <el-form-item label="备注" prop="remark" >
        <el-input type="textarea" v-model="state.ruleForm.remark" :rows="3"  placeholder="请输入说明"></el-input>
      </el-form-item>
     
    
    </el-form>
    <template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
			</span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="systemMenuDialog">
import {useI18n} from 'vue-i18n';
import { sceneObjData, sceneObjEdit, sceneListQuery, zutaiListQuery, sceneObjDetail } from '/@/api/basiciot/iconfiguration/list';


import {useMessage} from '/@/hooks/message';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const {t} = useI18n();

// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const menuDialogFormRef = ref();
let scadaList:any = ref([])
let treeList:any = ref([])
// 定义需要的数据
const state = reactive({
  ruleForm: {
    parentId: '',
    id: '',
    type: '1',
    scadaId: '',
    folderName: '',
    sort: '',
    remark: ''
  }
});

// 表单校验规则
const dataRules = reactive({
  type: [{required: true, message: '菜单类型不能为空', trigger: 'blur'}],
  parentId: [{required: true, message: '上级菜单不能为空', trigger: 'blur'}],
  folderName: [{required: true, message: '场景名称必填', trigger: 'blur'}],
  scadaId: [{required: true, message: '组态文件必填', trigger: 'blur'}]
});

// 打开弹窗
const openDialog = (type: string, row?: any) => {
  state.ruleForm.id = '';
  visible.value = true;

  nextTick(() => {
    menuDialogFormRef.value?.resetFields();
    state.ruleForm.parentId = row?.id || '-1';
  });

  if (row?.id && type === 'edit') {
    state.ruleForm.id = row.id;
    getMenuDetail(row.id);
  }
  // 渲染上级菜单列表树
  getTreeList()
  getZutaiList()
};
// 获取菜单节点的详细信息
const getMenuDetail = (id: string) => {
  sceneObjDetail(id).then((res) => {
    
    Object.assign(state.ruleForm, res.data);
  });
};



const getTreeList = () => {
  sceneListQuery().then((res) => {
    let menu = {
      id: '-1',
      name: '根目录',
      children: []
    };
    
    menu.children = res.data || []
    treeList.value = [menu]
  })
  
}
const getZutaiList = () => {
  zutaiListQuery().then(res => {
    
    scadaList.value = res.data || []
  })
}

// 保存数据
const onSubmit = async () => {
  const valid = await menuDialogFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
    if(state.ruleForm.type==='2'){
      
    }
    loading.value = true;
    state.ruleForm.id ? await sceneObjEdit(state.ruleForm) : await sceneObjData(state.ruleForm);
    useMessage().success(t(state.ruleForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
  openDialog,
});
</script>
